 <template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input
            v-model="formInline.account"
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="状态">
            <el-option label="生效" value="y"></el-option>
            <el-option label="无效" value="n"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search"
            >搜索</el-button
          >
          <el-button type="success" icon="el-icon-plus" @click="addOne"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 点击新增弹出 -->
      <el-dialog title="信息" :visible.sync="dialogFormVisible">
        <el-form :model="editForm">
          <el-form-item label="用户名">
            <el-input v-model="editForm.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              show-password
              v-model="editForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="editForm.status" placeholder="选择状态">
              <el-option label="生效" value="y"></el-option>
              <el-option label="无效" value="n"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 点击编辑弹出 -->
      <el-dialog title="修改" :visible.sync="determine">
        <el-form :model="editorFrom">
            <el-form-item label="id">
            <el-input v-model="editorFrom.id" autocomplete="off" readonly="true"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="editorFrom.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              show-password
              v-model="editorFrom.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="editorFrom.status" placeholder="选择状态">
              <el-option label="生效" value="y"></el-option>
              <el-option label="无效" value="n"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色id">
            <el-input v-model="editorFrom.role_id" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="determine = false">取 消</el-button>
          <el-button type="primary" @click="save02"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- rbacmanager信息 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="id"
        label="id"
        width="50px"
      ></el-table-column>
      <el-table-column prop="account" label="用户名" width="150px">
      </el-table-column>
      <el-table-column
        prop="password"
        label="密码"
        width="auto"
      ></el-table-column>
      <el-table-column prop="status" label="状态" width="150px">
      </el-table-column>
      <el-table-column
        prop="role_id"
        label="角色id"
        width="auto"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="auto">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="update(scope.row)"
            >编辑</el-button
          >
            <el-button type="text" size="small" @click="deleteOne(scope.row)"
              >删除</el-button
            >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件信息 -->
    <pageinfo
      :num="pageinit.total"
      @changeSizePage="changeSizePage"
      @changeCurrentPage="changeCurrentPage"
    ></pageinfo>
  </div>
</template>
  <script>
import pageinfo from "@/components/System/pageinfo.vue";
export default {
  components: {
    pageinfo,
  },
  data() {
    return {
      //表单显示的数据
      tableData: [],
      //分页
      pageinit: {
        //当前页
        currentPage: 1,
        //每页条数
        pageSize: 5,
        //总条数
        total: 0,
      },
      formInline: {
        account: "",
        status: "",
      },
      //用于决定弹窗的开启和关闭
      dialogFormVisible: false,
      editForm: {
        account: "",
        password: "",
        status: "",
      },
      //编辑弹窗的开启关闭
      determine:false,
      //编辑弹窗中的数据
      editorFrom:{
          id:"",
        account: "",
        password: "",
        status: "",
        role_id:"",
      }
    };
  },
  methods: {
    //查询所有
    findAllrbacManager() {
      this.$axios
        .get(
          "/rbacManager/manager/" +
            this.pageinit.currentPage +
            "/" +
            this.pageinit.pageSize
        )
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            //给总条数赋值
            this.pageinit.total = res.data.data.total;
          }
        })
        .catch(() => {});
    },
    changeSizePage(val) {
      this.pageinit.pageSize = val;
      this.pageinit.currentPage = 1;
      this.findAllrbacManager();
    },
    // 改变页数
    changeCurrentPage(val) {
      this.pageinit.currentPage = val;
      this.findAllrbacManager();
    },
    // 搜索方法
    search() {
      this.$axios
        .get(
          "/rbacManager/manager01/" +
            this.formInline.account +
            "/" +
            this.formInline.status
        )
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: "success",
            }),
              //改变为查到的集合
              (this.tableData = res.data.data);
            //改变为查到的条数
            this.pageinit.total = res.data.data.total;
            //查完之后改为空
            this.formInline.account = "";
            this.formInline.status = "";
          }
        })
        .catch();
    },
    //新增方法
    addOne() {
      this.dialogFormVisible = true;
      this.editForm.account = "";
      this.editForm.password = "";
      this.editForm.status = "";
    },
    //对话框点击保存
    save() {
      this.$axios
        .post("/rbacManager/manager", this.editForm)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: "success",
            });
            this.dialogFormVisible = false;
            //还要重新刷新表单数据
            this.findAllrbacManager();
          }
        })
        .catch();
    },
    //删除一个
    deleteOne(scope) {
        console.log(scope);
      this.$axios
        .delete("/rbacManager/manager/" + scope.id)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: "success",
            });
            //刷新页面
            this.findAllrbacManager();
          }
        })
        .catch();
    },
    //修改方法
    update(scope) {
        console.log(scope);
      //将原始数据写入
      this.editorFrom.id = scope.id;
      this.editorFrom.account = scope.account;
      this.editorFrom.password = scope.password;
      this.editorFrom.status = scope.status;
      this.editorFrom.role_id = scope.role_id;
    //弹出一个框
    this.determine = true;
    },
    //保存修改后的值
    save02() {
      this.$axios
        .put("/rbacManager/manager", this.editorFrom)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: "success",
            });
            this.dialogFormVisible = false;
            //还要重新刷新表单数据
            this.findAllrbacManager();
            //执行完毕，关闭弹窗
            this.determine = false;
          }
        })
        .catch();
    },
  },
  created() {
    this.findAllrbacManager();
  },
  //   watch: {
  //       $route(to,from){
  //          //to就是新的值 到哪里去
  //          console.log(to);
  //          //from就是旧值 从哪里来
  //          console.log(from);
  //      }
  //   }
};
</script>